<template>
  <div class="info-container">
    <div class="object-analysis">
      <h3>对象分析</h3>
      <img src="../assets/design/object.png">
    </div>
    <div class="typeInfo">
      <h3>户型信息</h3>
      <div class="tableArea">
        <table>
          <tr>
            <th v-for="(title, index) in tableTitle" :key="index">{{title}}</th>
          </tr>
          <!-- 使用template来实现双层循环 -->
          <template v-for="type in buildingType">
            <tr v-for="(subType, index2) in type.subType" :key="type.typeName+index2">
              <td :rowspan="type.rowspan" v-if="index2==0" class="typeName">{{type.typeName}}</td>
              <td class="subtypeName">{{subType.typeName}}</td>
              <td class="subtypeArea">{{subType.area}}</td>
              <td class="subtypeCount">{{subType.count}}</td>
              <td :rowspan="type.rowspan" v-if="index2==0">{{type.note}}</td>
            </tr>
          </template>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Info',
  data(){
    return{
      tableTitle: ['单元类型', '户型', '面积(m²)', '每单元每层套数', '分布位置'],
      buildingType:[
        {
          typeName: '板楼单元A',
          rowspan: 2,
          subType: [
            { typeName: '一居室', area: 47.4, count: 2 },
            { typeName: '二居室', area: 89.7, count: 2 }
          ],
          note: '分布于组团南部住宅楼中段'
        },
        {
          typeName: '板楼单元B',
          rowspan: 2,
          subType: [
            { typeName: '一居室', area: 50.1, count: 1 },
            { typeName: '三居室', area: 112.5, count: 2 }
          ],
          note: '分布于组团北部住宅楼中段'
        },
        {
          typeName: '塔楼单元C',
          rowspan: 3,
          subType: [
            { typeName: '一居室', area: 64.1, count: 2 },
            { typeName: '二居室', area: 82.8, count: 2 },
            { typeName: '三居室', area: 106.8, count: 2 }
          ],
          note: '为组团内独立塔楼'
        },
        {
          typeName: '塔楼单元D',
          rowspan: 4,
          subType: [
            { typeName: '一居室', area: 64.1, count: 1 },
            { typeName: '二居室', area: 82.8, count: 1 },
            { typeName: '三居室', area: 106.8, count: 2 },
            { typeName: '三居室', area: 101.2, count: 1 }
          ],
          note: '分布于组团北部住宅楼端头'
        },
        {
          typeName: '塔楼单元E',
          rowspan: 5,
          subType: [
            { typeName: '一居室', area: 53.7, count: 1 },
            { typeName: '一居室', area: 64.1, count: 2 },
            { typeName: '二居室', area: 82.8, count: 2 },
            { typeName: '二居室', area: 92.7, count: 1 },
            { typeName: '三居室', area: 106.8, count: 1 },
          ],
          note: '分布于组团南部住宅楼中段'
        },
        {
          typeName: '公寓单元',
          rowspan: 1,
          subType: [
            { typeName: '公寓', area: 37.8, count: 19}
          ],
          note: '分布于住区南部、靠近朝阳路地带'
        }
      ]
    }
  }
}
</script>

<style scoped>
.info-container{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  position: relative;
}

.object-analysis, .typeInfo{
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 90%;
}

.object-analysis > h3, .typeInfo > h3{
  width: 100%;
  color: var(--green);
  font-weight: 600;
  font-size: 1.5rem;
}

.object-analysis > img{
  width: min(60%, 600px);
  margin: 2rem 0;
  animation: fadeUp 1s ease-out;
}

.typeInfo > .tableArea{
  width: 100%;
  overflow-x: auto;
  margin: 2rem 0;
}

table{
  width: max(100%, 600px);
  border-collapse: collapse;
}

th, td{
  border: 2px solid #dddddd;
  text-align: center;
  padding: 0.5rem 0;
}

th{
  background: var(--purple);
  color: white;
}
td.typeName{
  font-weight: 600;
  color: var(--blue);
}

td:hover{
  color: var(--blue);
}

th:nth-child(1), td.typeName{
  width: 8rem;
}
th:nth-child(2), td.subtypeName{
  width: 6rem;
}
th:nth-child(3), td.subtypeArea{
  width: 6rem;
}
th:nth-child(4), td.subtypeCount{
  width: 10rem;
}

@keyframes fadeUp {
  0%{
    opacity: 0;
    transform: translateY(20%);
  }
}

@media screen and (max-width: 767px) {
  .object-analysis > img{
    width: 100%;
  }
}

</style>